/*
    分页使用：
    组件：<common-page :getPage="data.page" @givePageFun="givePageFun"></common-page>
    接收参数：getPage (object类型) 
    传递参数方法：givePageFun
    data.page ==>>{
        totalPage: xxx, 总页数
        totalNum: xxx, 总条数
        pageNum: xxx 每页请求xxx条数据
    }
*/


Vue.component('common-page',{

    props: ['getPage'], // 接收参数

    data() {
        return {
            givePage: { // 传递参数
                nowPage: 1 // 当前页数
            },
            pageStatus: '' // 数据未变禁止多次点击传递数据
        }
    },

    template: `<div class="common__page__box">
                    <div class="common__page__con">
                        <div class="common__page__btn">
                            <span data-type="0" v-show="givePage.nowPage > 1" @click="btnPageFun">首页</span>
                            <span data-type="1" v-show="givePage.nowPage > 1" @click="btnPageFun">上一页</span>
                            <span data-type="2" v-show="givePage.nowPage < getPage.totalPage" @click="btnPageFun">下一页</span>
                            <span data-type="3" v-show="givePage.nowPage < getPage.totalPage" @click="btnPageFun">尾页</span>
                            <i>跳转到</i>
                            <input type="number" placeholder="输入页码" v-model="givePage.nowPage"/>
                            <i>页</i>
                            <span @click="inputPageFun">确定</span>
                        </div>
                        <div class="common__page__tips">
                            <p>共 <i>{{getPage.totalNum}}</i> 条,共 <i>{{getPage.totalPage}}</i> 页, 当前 <i>{{givePage.nowPage}} / {{getPage.totalPage}}</i> 页</p>
                        </div>
                    </div>
                </div>`,
    
    methods: {
        btnPageFun: function (e) { // 非输入页点击
            let type = parseInt(e.target.dataset.type)
            switch (type) {
                case 0:
                    this.givePage.nowPage = 1
                break
                case 1:
                    this.givePage.nowPage --
                break
                case 2:
                    if (this.givePage.nowPage >= this.getPage.totalPage) {
                        return false
                    }
                    this.givePage.nowPage ++
                break
                case 3:
                    this.givePage.nowPage = this.getPage.totalPage
                break
            }
            this.givePageFun()
        },

        inputPageFun: function () { // 分页确定按钮
            
            if (this.pageStatus > this.givePage.nowPage) { // 禁止点击多次传递数据
                return false
            }
            this.pageStatus ++

            this.givePageFun()
        },

        givePageFun: function () { // 传递
            this.$emit('givePageFun', this.givePage)
        }
    },

    watch: {
        'givePage.nowPage': {  // input输入监听
            handler (curVal, oldVal) { 
                if (curVal < 1) {
                    this.givePage.nowPage = 1
                }
                if (curVal >= this.getPage.totalPage) {
                    this.givePage.nowPage = this.getPage.totalPage
                }
                this.pageStatus = this.givePage.nowPage
            },
            immediate: true,
        }
    },

    mounted() {
        console.log(this.pageStatus)
    },

    created() {

    },
})